<template>
    <div class="resetPassword">
        <slot name="header">
            <h2>重置密码</h2>
        </slot>
        <div class="input_wrapper">
            <div class="inputItem" :class="{'focus':isFocus.password1,'password_error':errorFlag.password1}">
                <div class="inputContent">
                    <img :src=icons.password_icon1 alt="" class="icon">
                    <input type="password" @focus="focus('password1')" @blur="blur('password1')" ref="password1" placeholder="请输入密码" v-model="input_info.password1">
                </div>
            </div>
            <div class="inputItem" :class="{'focus':isFocus.password2,'password_error':errorFlag.password2,'password_dif':errorFlag.password2_dif}">
                <div class="inputContent">
                    <img :src=icons.password_icon2 alt="" class="icon">
                    <input type="password" @focus="focus('password2')" @blur="blur('password2')" ref="password2" placeholder="再次输入密码" v-model="input_info.password2" @keyup="validatePassword()">
                </div>
            </div>
        </div>

        <div>
            <button :class="{'opt_button':!isLoginForbidden,'forbidden':isLoginForbidden}" @click="clickFinish()">
                {{mConfigs.finish_btn_value}}
            </button>
        </div>

    </div>
</template>

<script>
    export default {
        name: "bm_reset_password",
        data(){
            return{
                input_info:{
                    password1:"",
                    password2:""
                },
                isFocus:{
                    password1:false,
                    password2:false
                },
                errorFlag:{
                    password1:false,
                    password2:false,
                    password2_dif:false
                },
                timer:false,
                isLoginForbidden:true,
                hideFooter:true,
                docmHeight: document.documentElement.clientHeight || document.body.clientHeight,
                showHeight: document.documentElement.clientHeight || document.body.clientHeight,
            }
        },

        watch: {
            //监听显示高度
            showHeight:function() {
                this.hideFooter = this.docmHeight <= this.showHeight;
            },
            //监听输入框输入内容
            input_info:{
                deep:true,
                handler:function(newValue,oldValue){
                    if (newValue){
                        this.isLoginForbidden = (!(newValue.password1 !== "" && newValue.password2 !== ""));
                    } else if (oldValue) {
                        this.isLoginForbidden = false;
                    }
                }
            },

        },

        props:['baseConfig','iconsBase64'],
        computed:{
            //合并父组件的传入值与默认值
            mConfigs(){
                return Object.assign({
                    finish_btn_value:'完成'
                },this.baseConfig)
            },
            icons(){
                return Object.assign({
                    password_icon1:"",
                    password_icon2:"",
                    password_blur:"",
                    password_active:"",
                },this.iconsBase64)
            }
        },

        mounted() {
            this.phoneNum = this.$route.params.tel;
            //监听事件
            window.onresize = ()=>{
                return(()=>{
                    this.showHeight = document.documentElement.clientHeight || document.body.clientHeight;
                })()
            }
        },
        methods:{
            clickFinish(){
                let that = this;
                //发送请求
                if (!this.errorFlag.password1 && !this.errorFlag.password2 && !this.errorFlag.password2_dif) {
                    this.$emit('parent_finish',this.input_info.password1);
                }
            },
            focus(type){
                if (type === "password1"){
                    this.isFocus.password1 = true;
                    this.icons.password_icon1 = this.icons.password_active;
                    this.icons.password_icon2 = this.icons.password_blur;
                    this.errorFlag.password1 = false;
                    this.errorFlag.password2_dif = false;
                } if (type === "password2"){
                    this.isFocus.password2 = true;
                    this.icons.password_icon2 = this.icons.password_active;
                    this.icons.password_icon1 = this.icons.password_blur;
                    this.errorFlag.password2 = false;
                }

            },
            blur(type){
                if (type === "password1") {
                    this.isFocus.password1 = false;
                    this.icons.password_icon1 = this.icons.password_blur;
                    //判空
                    let password1_value = this.$refs.password1.value;
                    this.errorFlag.password1 = password1_value === "" || password1_value === null || password1_value === undefined;
                } if (type === "password2"){
                    this.isFocus.password2 = false;
                    this.icons.password_icon2 = this.icons.password_blur;
                    //判空
                    let password2_value = this.$refs.password2.value;
                    this.errorFlag.password2 = password2_value === "" || password2_value === null || password2_value === undefined;
                }
            },
            //验证两次输入密码是否一致
            validatePassword(){
                let password1 = this.$refs.password1.value;
                let password2 = this.$refs.password2.value;
                this.errorFlag.password2_dif = password1 !== password2;
            }
        }
    }
</script>

<style lang="less" scoped>
    @mainColor: #007cdc;
    .gradient{
        background-image: linear-gradient(to right,@mainColor,lighten(@mainColor,18%));
    }
    .error{
        background: red;
        transform: scaleY(1);
        font-size: .72rem;
        color: red;
        text-align: right;
        line-height: 1.6rem;
    }
    .resetPassword{
        width: 80%;
        margin: 33% auto;
        text-align: center;
        h2{
            color: #666666;
            font-size: 1.6rem;
        }
        //用户名、密码输入框
        .input_wrapper{
            .phone_number{
                display: flex;
                flex-direction: row;
                font-size: 1.2rem;
                font-weight: bold;
            }
            .inputItem{
                display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: flex-end;
                position: relative;
                margin-top: 2rem;
                &::after{
                    content: "";
                    position: absolute;
                    height: 1px;
                    width: 100%;
                    bottom: 0;
                    transform: scaleY(.5);
                    background: #bfbfbf;
                }

                .inputContent{
                    padding: .4rem;
                    display: flex;
                    flex-direction: row;
                    justify-content: center;
                    align-items: flex-end;
                    .icon{
                        width: 1.32rem;
                        height: 1.32rem;
                        margin-right: 1.2rem;
                    }
                    input{
                        font-size: 1.11rem;
                        border: none;
                        outline: none;
                        width: 90%;
                        letter-spacing: .1rem;
                        &::placeholder{
                            color: #aaaaaa;
                        }
                    }
                }
            }
            .focus::after{
                background: @mainColor;
            }
            .password_error::after{
                content: '密码不能为空';
                .error();
            }
            .password_dif::after{
                content: '两次密码输入不一致';
                .error();
            }
        }
        //完成按钮
        button{
            .gradient;
            border: none;
            outline: none;
            width: 100%;
            position: relative;
            color: white;
            border-radius: 1.2rem;
            padding-top: .42rem;
            padding-bottom: .42rem;
            margin-top: 14%;
            font-size: 1.111rem;
            overflow: hidden;
            letter-spacing: .6rem;
            text-indent: .6rem;
            text-align: center;
            outline: 0;
        }
        .opt_button{
            cursor: pointer;
            &::after{
                content: "";
                background: #fff;
                display: block;
                position: absolute;
                width: 200%;
                height: 200%;
                top: -5%;
                border-radius: 50px;
                margin-left: -80%;
                opacity: 0;
                transition: all 0.75s ease-in-out;
            }
            &:active::after {
                width: 0;
                opacity: 0.6;
                transition: 0s;
            }
        }
        .forbidden{
            background: tint(@mainColor,70%);
            color: fade(white,80%);
        }

    }
</style>
